<template>
  <div v-loading="loading" class="gallery-manage-wrapper">
    <div class="gallery-manage">
        <div class="title">
           <el-button type="primary" icon="el-icon-download" @click="showImportPic=true">导入图片</el-button>
            <div v-show="isBox" style="display:inline-block;margin-left:20px;">
              <label title="截屏" class="select_btn" ref="creenBtn">
                 <el-button type="primary" icon="el-icon-edit" >截屏工具</el-button>
              </label>
            </div>
        </div>
        <div class="title">
          未分类图片
        </div>
        <div class="gallery-list">
          <el-carousel :loop="false" :autoplay="false" class="carousel" indicator-position="none">
            <el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index">
              <div v-for="(imgList,index1) in list" :key="index1" class="divSrc">
                 <h3 class="medium">{{ imgList.title }}</h3>
                 <p>111</p>
                 <img class="img" :src="imgList.img" />
                 <div class="oprate-btn">
                   <span><i class="el-icon-edit"></i>编辑</span>
                   <span><i class="el-icon-delete"></i>删除</span>
                 </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-form
      ref="form"
      size="small"
      class="demo-form-inline"
    >
      <el-row class="form-inline">
        <el-col style="margin-right:20px">
          <el-form-item
            label=""
          >
            <el-select
              size="small"
              v-model="listForm.status"
              clearable
              placeholder="请选择AI题库"
              class="w100"
            >
              <el-option
                v-for="item in currentNode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col >
          <el-form-item
            label=""
          >
            <el-select
              size="small"
              v-model="listForm.status"
              clearable
              placeholder="请选择分类"
              class="w100"
            >
              <el-option
                v-for="item in currentNode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
          <el-col >
            <el-form-item label="图片名称" prop="srCode" label-width="95px">
              <el-input v-model.trim="listForm.srCode" placeholder="请输入图片名称"/>
            </el-form-item>
          </el-col>
        <el-col class="floatR" >
          <el-form-item label="最近修改时间" label-width="125px" style="margin-right:20px">
            <el-date-picker
              class="w100"
              v-model="listForm.createtTime"
              type="datetimerange"
              align="left"
              unlink-panels
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
           <el-form-item
          >
          <el-button
            size="small"
            type="primary"
            @click="onSearch"
            icon="el-icon-search"
            >查 询</el-button
          >
           </el-form-item>
      </el-row>
    </el-form>
    <div class="title">
          实操课程一
    </div>
    <div class="gallery-list">
          <el-carousel :loop="false" :autoplay="false" class="carousel" indicator-position="none">
            <el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index">
              <div v-for="(imgList,index1) in list" :key="index1" class="divSrc">
                 <h3 class="medium">{{ imgList.title }}</h3>
                 <p>111</p>
                 <img class="img" :src="imgList.img" />
                 <div class="oprate-btn">
                   <span><i class="el-icon-edit"></i>编辑</span>
                   <span><i class="el-icon-delete"></i>删除</span>
                 </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
    </div>
     <ImportPic
      :isShow="showImportPic"
      @closeBox="closeBox"
></ImportPic>
  </div>
</template>
//  <script src="../../utils/capture/niuniucapture.js"></script>
//  <script src="../../utils/capture/capturewrapper.js"></script>
<script>
// import { consequence } from "@/api";
 import  ImportPic from "./components/importPic.vue";
export default {
  name: "galleryManage",
  components: { ImportPic},
  data() {
    return {
      loading: false,
      dataList:[],
       currentNode: [
        {
          label: '需求已提交',
          value: 1
        }, {
          label: '需求已派单',
          value: 3
        }],
      listForm:{
        status:"1"
      },
      showImportPic:false,
      isShow: false,
      isBox: true,
      captureObjSelf: null
    };
  },
  mounted() {
       this.byEvents()
       this.fnScreen()
  },
  methods: {
    clickBox() {
      if (this.isShow) {
        this.closeBox()
      } else {
        this.isShow = true
        document.addEventListener('click', this.clickOutSide, false)
      }
    },
    closeBox() {
      this.isShow = false
      document.removeEventListener('click', this.clickOutSide, false)
    },
    clickOutSide(e) {
      if (this.$el && !this.$el.contains(e.target)) {
        this.closeBox()
      }
    },
  fnScreen() {
      var _self = this
      // copy niuniucapture.js begin
      // 牛牛截图的JS部分的核心流程封装在此文件中，绝大部分情况下，您不需要修改此文件中的JS内容，它已经包含了在所有浏览器上应用
      // 牛牛截图所需要的所有代码，您只需要去修改capturewrapper.js，将相应的函数修改成与您的UI匹配的即可
      // 设置截图的参数
      var emPensize = 1 // 设置画笔大小
      var emDrawType = 2 // 设置是腾讯风格还是360风格 0： 腾讯风格   1： 360风格
      var emTrackColor = 3 // 自动识别的边框的颜色
      var emEditBorderColor = 4 // 文本输入的边框颜色
      var emTransparent = 5 // 工具栏的透明度
      // var emWindowAware = 6 // 设置是否禁用随着DPI放大
      var emSetSaveName = 8 // 设置保存时的开始文字     免费版本无效
      // var emSetMagnifierBkColor = 9 // 设置放大镜的背景色，不设置则透明
      var emSetMagnifierLogoText = 10 // 设置放大镜上的LOGO字符，可提示快捷键，如： 牛牛截图(CTRL + SHIFT + A)     免费版本无效
      var emSetWatermarkPictureType = 20 // 设置水印的类型
      var emSetWatermarkPicturePath = 21 // 设置水印的路径
      var emSetWatermarkTextType = 22 // 设置水印文字的类型
      var emSetWatermarkTextValue = 23 // 设置水印文字的字符串
      var emSetMosaicType = 24 // 指定马赛克的类型，1为矩形，2为画线
      var emSetTooltipText = 25 // 用于设置工具栏图标的TOOLTIP文字
      var emSetMoreInfo = 26 // 设置额外的信息，用于特殊需求
      /*******************************************************************************/

      var emClosed = 1
      var emConnected = 2
      var emConnecting = 3

      var emCaptureSuccess = 0
      var emCaptureFailed = 1
      var emCaptureUnknown = 2

      // var emCmdReady = -1
      // var emCmdCapture = 0
      // var emCmdSaveFile = 1

      function rgb2value(r, g, b) {
        return r | (g << 8) | (b << 16)
      }

      // function onpluginLoaded() {
      //   _self.captureObjSelf.pluginLoaded()
      // }

      function NiuniuCaptureObject() {
        var self = this
        _self.captureObjSelf = this
        this.PenSize = 2
        this.DrawType = 0
        this.TrackColor = rgb2value(255, 0, 0)
        this.EditBorderColor = rgb2value(255, 0, 0)
        this.Transparent = 240
        this.WindowAware = 1
        this.MosaicType = 1
        this.SaveName = '保存'
        this.MagnifierLogoText = '截图'
        this.WatermarkPictureType = '2|100|100|400|400|20'
        this.WatermarkPicturePath = ''
        this.WatermarkTextType = '2|100|100|100|40|20|0|150|30|80,55,55,55'
        this.WatermartTextValue = ''
        this.NiuniuAuthKey = ''
        this.ToolTipText = '' // tipRectangle|tipCircle|tipArrow|tipBrush|tipGlitter|tipMosaic|tipText|tipUndo|tipSave|tipCancel|tipFinish|txtFinish
        this.MoreInfo = '1,100|300|600'

        this.useCrx = false // 是否使用crx
        this.useCustomizedProtoco = true // 是否使用浏览器自定义协议加websocket

        this.Version = '1.0.0.0'
        this.hostPort = '30101,30102'
        this.hostPortIndex = 0
        this.CaptureName = 'NiuniuCapture'
        this.NiuniuSocket = null
        this.connectState = emClosed
        this.IsWaitCustomizedCallBack = false
        this.TimeIntervalID = -1
        this.ReceivedEchoBack = false
        this.SocketTimeStamp = new Date().getTime()
        this.TimeOutID = -1

        this.FinishedCallback = null
        this.PluginLoadedCallback = null
        this.VersionCallback = null

        this.IsNeedCrx = function() {
          if (!self.useCrx) {
            return false
          }

          if (self.pluginValid()) {
            return false
          }

          var isChrome = self.IsRealChrome()
          var chromeMainVersion = self.GetChromeMainVersion()
          if (isChrome && chromeMainVersion > 41) {
            return true
          }
          return false
        }

        this.LoadPlugin = function() {
          var obj = document.getElementById('capturecontainer')
          if (!obj) {
            var div = document.createElement('div')
            div.id = 'capturecontainer'
            div.style.height = 0
            div.style.width = 0
            document.body.appendChild(div)
            obj = document.getElementById('capturecontainer')
          }
          obj.innerHTML = ''
          obj.innerHTML =
            '<object id="niuniuCapture" type="application/x-niuniuwebcapture" width="0" height="0"><param name="onload" value="onpluginLoaded" /></object>'

          var iframeObj = document.getElementById('startCaptureFrame')
          if (!iframeObj) {
            var iframe = document.createElement('iframe')
            iframe.id = 'startCaptureFrame'
            iframe.style.display = 'none'
            document.body.appendChild(iframe)
            iframeObj = document.getElementById('startCaptureFrame')
          }
        }

        this.niuniuCapture = function() {
          return document.getElementById('niuniuCapture')
        }

        this.addEvent = function(obj, name, func) {
          if (obj.attachEvent) {
            obj.attachEvent('on' + name, func)
          } else {
            obj.addEventListener(name, func, false)
          }
        }

        this.pluginValid = function() {
          try {
            if (self.niuniuCapture().valid) {
              return true
            }
          } catch (e) {}
          return false
        }

        this.OnCaptureFinished = function(
          x,
          y,
          width,
          height,
          content,
          localpath
        ) {
          self.OnCaptureFinishedEx(
            1,
            x,
            y,
            width,
            height,
            '',
            content,
            localpath
          )
        }

        this.OnCaptureFinishedEx = function(
          type,
          x,
          y,
          width,
          height,
          info,
          content,
          localpath
        ) {
          // 交给上层去处理截图完成后的事项
          if (self.FinishedCallback !== null) {
            self.FinishedCallback(
              type,
              x,
              y,
              width,
              height,
              info,
              content,
              localpath
            )
          } else {
            alert(
              '截图完成的事件未绑定，将不能对图片进行处理，请指定FinishedCallback回调函数'
            )
          }
        }

        this.pluginLoaded = function() {
          self.GetVersion()
          if (!self.pluginValid()) {
            if (self.PluginLoadedCallback !== null) {
              self.PluginLoadedCallback(false)
            }
            return false
          }

          // 此函数必需调用，传递正确的参数，且必需先于其他函数调用
          self.niuniuCapture().InitCapture(self.NiuniuAuthKey)

          self.niuniuCapture().InitParam(emPensize, self.PenSize)
          self.niuniuCapture().InitParam(emDrawType, self.DrawType)
          self.niuniuCapture().InitParam(emTrackColor, self.TrackColor)
          self
            .niuniuCapture()
            .InitParam(emEditBorderColor, self.EditBorderColor)
          self.niuniuCapture().InitParam(emTransparent, self.Transparent)

          self.niuniuCapture().InitParam(emSetSaveName, self.SaveName)
          self
            .niuniuCapture()
            .InitParam(emSetMagnifierLogoText, self.MagnifierLogoText)
          self.niuniuCapture().InitParam(emSetMosaicType, self.MosaicType)

          // 设置工具栏上的按钮TOOLTIP
          self.niuniuCapture().InitParam(emSetTooltipText, self.ToolTipText)

          self.niuniuCapture().InitParam(emSetMoreInfo, self.MoreInfo)
          // 注：以上设置LOGO及保存名的接口，免费版本无效

          // 添加控件的事件监听
          self.addEvent(
            self.niuniuCapture(),
            'CaptureFinishedEx',
            self.OnCaptureFinishedEx
          )
          // 以下这个事件主要是用于兼容旧的浏览器控件的事件通知
          self.addEvent(
            self.niuniuCapture(),
            'CaptureFinished',
            self.OnCaptureFinished
          )

          if (self.PluginLoadedCallback !== null) {
            self.PluginLoadedCallback(true)
          }
        }

        this.SetWatermarkPicture = function(watermarPicData) {
          self.WatermarkPicturePath = watermarPicData
          // 设置测试的水印图片的Base64字符串，此操作应该是在页面加载中处理比较合适
          if (!self.pluginValid()) return
          self
            .niuniuCapture()
            .InitParam(emSetWatermarkPicturePath, self.WatermarkPicturePath)
          self
            .niuniuCapture()
            .InitParam(emSetWatermarkPictureType, self.WatermarkPictureType)
        }

        this.SetWatermarkText = function(watermarkText) {
          self.WatermarkTextValue = watermarkText
          // 设置测试的水印文字，此操作应该是在页面加载中处理比较合适
          if (!self.pluginValid()) return
          // nShowType|nMinWidth|nMinHeight|nVerticalInterval|nOffset|nFontSize|nIsBold|nTextWidth|nTextHeight|colorText
          self
            .niuniuCapture()
            .InitParam(emSetWatermarkTextValue, self.WatermarkTextValue)
          self
            .niuniuCapture()
            .InitParam(emSetWatermarkTextType, self.WatermarkTextType)
        }

        this.SavePicture = function(savename) {
          if (self.pluginValid()) {
            self.niuniuCapture().SavePicture(savename)
          }
        }

        this.GetCursorPosition = function() {
          if (self.pluginValid()) {
            var val = self.niuniuCapture().GetCursorPosition()
            return val
          }
          return ''
        }

        this.NewCaptureParamObject = function(
          defaultpath,
          hideCurrWindow,
          autoCaptureFlag,
          x,
          y,
          width,
          height
        ) {
          var obj = {}
          obj.CmdType = 1
          obj.IsGBK = 0 // 是否是GBK编码，这样会涉及到编码转换
          obj.AuthKey = self.NiuniuAuthKey //
          obj.Pensize = self.PenSize // 设置画笔大小
          obj.DrawType = self.DrawType // 设置是腾讯风格还是360风格
          obj.TrackColor = self.TrackColor // 自动识别的边框的颜色
          obj.EditBorderColor = self.EditBorderColor // 文本输入的边框颜色
          obj.Transparent = self.Transparent // 工具栏的透明度
          obj.SetSaveName = self.SaveName // 设置保存时的开始文字
          obj.SetMagnifierLogoText = self.MagnifierLogoText // 设置放大镜上的LOGO字符
          obj.SetWatermarkPictureTypeEx = self.WatermarkPictureType // 设置水印的类型
          obj.SetWatermarkPicturePath = self.WatermarkPicturePath // 设置水印的路径
          obj.SetWatermarkTextTypeEx = self.WatermarkTextType // 设置水印文字的类型
          obj.SetWatermarkTextValue = self.WatermarkTextValue // 设置水印文字
          obj.MosaicType = self.MosaicType // 设置马赛克的类型
          obj.SetToolbarText = self.ToolTipText
          obj.MoreInfo = this.MoreInfo
          // 以下是截图时传递的参数
          obj.DefaultPath = defaultpath
          obj.HideCurrentWindow = hideCurrWindow
          obj.AutoCaptureFlag = autoCaptureFlag
          obj.x = x
          obj.y = y
          obj.Width = width
          obj.Height = height
          return obj
        }

        // 此函数用于绑定在Chrome42以上的版本时，扩展在截图完成后进行事件通知的处理
        this.BindChromeCallback = function() {
          document.addEventListener('NiuniuCaptureEventCallBack', function(
            evt
          ) {
            var _aoResult = evt.detail
            if (_aoResult.Result === -2) {
              self.OnCaptureFinishedEx(-1, 0, 0, 0, 0, '', '', '') // 通知重新下载控件
            }
            if (_aoResult.Result !== -1) {
              self.OnCaptureFinishedEx(
                _aoResult.Type,
                _aoResult.x,
                _aoResult.y,
                _aoResult.Width,
                _aoResult.Height,
                _aoResult.Info,
                _aoResult.Content,
                _aoResult.LocalPath
              )
            } else {
              // alert('出错：' + _aoResult.Info)
            }
          })
        }

        this.IsRealChrome = function() {
          try {
            var agent = window.navigator.userAgent.toLowerCase()
            var isQQBrowser = agent.indexOf('qqbrowser') !== -1
            if (isQQBrowser) {
              return false
            }
            var isUBrowser = agent.indexOf('ubrowser') !== -1
            if (isUBrowser) {
              return false
            }
            var isChrome = agent.indexOf('chrome') !== -1
            if (isChrome) {
              return true
              // if (chrome && chrome.runtime) {
              //   return true
              // }
            }
            return false
          } catch (e) {}
          return false
        }

        this.GetChromeMainVersion = function() {
          var gsAgent = navigator.userAgent.toLowerCase()
          var gsChromeVer =
            '' + (/chrome\/((\d|\.)+)/i.test(gsAgent) && RegExp['$1'])

          if (gsChromeVer !== 'false') return parseInt(gsChromeVer)
          return 0
        }

        this.DoCaptureForChrome = function(
          name,
          hide,
          AutoCapture,
          x,
          y,
          width,
          height
        ) {
          var obj = self.NewCaptureParamObject(
            name,
            hide,
            AutoCapture,
            x,
            y,
            width,
            height
          )
          try {
            var json = JSON.stringify(obj)

            var CrxEventFlag = 'NiuniuCaptureEvent'
            var objFlag = document.getElementById(CrxEventFlag) // $('#' + CrxEventFlag);
            if (objFlag.length < 1) {
              return emCaptureFailed
            }
            var evt = document.createEvent('CustomEvent')
            evt.initCustomEvent(CrxEventFlag, true, false, json)
            document.dispatchEvent(evt)
            return emCaptureUnknown
          } catch (e) {}
          return emCaptureUnknown
        }

        this.DoCapture = function(
          name,
          hide,
          AutoCapture,
          x,
          y,
          width,
          height
        ) {
          if (self.IsNeedCrx()) {
            return self.DoCaptureForChrome(
              name,
              hide,
              AutoCapture,
              parseInt(x),
              parseInt(y),
              parseInt(width),
              parseInt(height)
            )
          }

          if (self.IsNeedCustomizedProtocol()) {
            return self.DoCaptureForCustomize(
              name,
              hide,
              AutoCapture,
              parseInt(x),
              parseInt(y),
              parseInt(width),
              parseInt(height)
            )
          }

          if (!self.pluginValid()) {
            return emCaptureFailed
          }
          self
            .niuniuCapture()
            .Capture(name, hide, AutoCapture, x, y, width, height)
          return emCaptureSuccess
        }

        this.InitNiuniuCapture = function() {
          self.LoadPlugin()
          if (self.IsNeedCrx()) {
            self.BindChromeCallback()
          }

          if (self.IsNeedCustomizedProtocol()) {
            self.InitWebSocketAndBindCallback()
          }
        }

        this.InitWebSocketAndBindCallback = function() {
          self.connectHost()
        }

        this.getNextPort = function() {
          // init port params flag
          // 进行拆分处理 self.hostPort;
          var portArray = self.hostPort.split(',')
          if (portArray.length < 1) {
            // alert('服务端口为空')
            return 30101
          }
          if (self.hostPortIndex < 0) {
            self.hostPortIndex = 0
          }
          if (self.hostPortIndex > portArray.length - 1) {
            self.hostPortIndex = portArray.length - 1
          }
          var nPort = parseInt(portArray[self.hostPortIndex])
          self.hostPortIndex++
          if (self.hostPortIndex > portArray.length - 1) {
            self.hostPortIndex = 0
          }
          return nPort
        }

        this.connectHost = function() {
          if (self.NiuniuSocket !== null) {
            self.WriteLog('connectHost NiuniuSocket is not null, return.')
            return
          }
          clearTimeout(self.TimeOutID)
          self.connectState = emConnecting

          try {
            var wshosts = ['127.0.0.1', 'localhost']
            for (let i in wshosts) {
              try {
                var host =
                  'ws://127.0.0.1:' +
                  self.getNextPort() +
                  '/' +
                  self.CaptureName
                self.NiuniuSocket = new WebSocket(host)
                // console.log('i:' + i)
                break
              } catch (ee) {
                // var ggg = 0
              }
            }

            // OutputLog('Socket Status: '+socket.readyState);
            self.NiuniuSocket.onopen = function(evt) {
              self.NiuniuSocket.send('0' + self.SocketTimeStamp)
              self.WriteLog('NiuniuSocket.onopen.')
              clearTimeout(self.TimeOutID)
            }

            self.NiuniuSocket.onmessage = function(msg) {
              var str = ''
              str = msg.data
              var id = str.substr(0, 1)
              var arg1 = str.substr(1)
              clearTimeout(self.TimeOutID)
              if (id === '0') {
                self.hostPortIndex--
                // 表示连接成功，此时应该提示可以截图了
                self.connectState = emConnected
                self.pluginLoaded()
                if (self.IsWaitCustomizedCallBack) {
                  setTimeout(_self.captureObjSelf.SendReadyRecvData(), 3)
                }
                self.WriteLog('connect sucess.')
                self.ReceivedEchoBack = true
                clearInterval(self.TimeIntervalID)
                self.TimeIntervalID = setInterval(
                  _self.captureObjSelf.LoopEchoMessage(),
                  3000
                )
              }
              if (id === '1') {
                // 解析消息
                // eslint-disable-next-line
                var _aoResult = eval('(' + arg1 + ')')
                self.ReceivedEchoBack = true
                if (_aoResult.command === 'echo') {
                  self.WriteLog('received echo')
                  return
                }
                self.WriteLog('received capturedata.')
                if (_aoResult.command === 'version') {
                  self.WriteLog(_aoResult.Ver)
                  self.VersionCallback(_aoResult.Ver)
                } else {
                  self.OnCaptureFinishedEx(
                    _aoResult.Type,
                    _aoResult.x,
                    _aoResult.y,
                    _aoResult.Width,
                    _aoResult.Height,
                    _aoResult.Info,
                    _aoResult.Content,
                    _aoResult.LocalPath
                  )
                }
              }
            }

            self.NiuniuSocket.onclose = function(evt) {
              self.OnWebSocketError('self.NiuniuSocket.onclose.' + evt.data)
            }
            self.NiuniuSocket.onerror = function(evt) {
              // self.OnWebSocketError("self.NiuniuSocket.onerror." + evt.data);
            }
          } catch (e) {
            self.OnWebSocketError('connect exception.' + e.message)
          }
        }

        this.WriteLog = function(txt) {
          // 写日志
          try {
            // console.log(txt);
          } catch (e) {}
        }

        this.OnWebSocketError = function(type) {
          self.WriteLog(type)
          self.ReceivedEchoBack = false
          self.connectState = emClosed

          if (self.NiuniuSocket !== null) {
            self.NiuniuSocket.close()
          }

          self.NiuniuSocket = null
          clearTimeout(self.TimeOutID)
          self.TimeOutID = setTimeout(_self.captureObjSelf.connectHost(), 800)
        }

        this.LoopEchoMessage = function() {
          if (!self.ReceivedEchoBack) {
            self.OnWebSocketError(
              'this.LoopEchoMessage, !self.ReceivedEchoBack'
            )
            self.ReceivedEchoBack = false
            clearInterval(self.TimeIntervalID)
            self.TimeIntervalID = setInterval(
              _self.captureObjSelf.LoopEchoMessage(),
              3000
            )
            return
          }
          self.ReceivedEchoBack = false
          clearTimeout(self.TimeOutID)
          if (self.connectState !== emConnected) {
            return
          }
          var obj = {}
          obj.command = 'echo'
          self.NiuniuSocket.send('1' + encodeURIComponent(JSON.stringify(obj)))
        }

        this.SendReadyRecvData = function() {
          self.WriteLog('SendReadyRecvData.')
          var obj = self.NewCaptureParamObject('', 0, 0, 0, 0, 0, 0)
          obj.CmdType = -1
          self.NiuniuSocket.send('1' + encodeURIComponent(JSON.stringify(obj)))
        }

        this.DoCaptureForCustomize = function(
          name,
          hide,
          AutoCapture,
          x,
          y,
          width,
          height
        ) {
          var obj = self.NewCaptureParamObject(
            name,
            hide,
            AutoCapture,
            x,
            y,
            width,
            height
          )
          try {
            // 启动客户端，或者通过websocket去发送数据
            if (self.connectState === emConnected) {
                console.log('111')
              let json = JSON.stringify(obj)
              self.NiuniuSocket.send('1' + encodeURIComponent(json))
            } else {
              console.log('222')
              // 首次启动时，不支持水印，否则会过长
              obj.SetWatermarkPicturePath = ''
              // obj.SetWatermarkTextValue = "";
              let json = JSON.stringify(obj)
              self.WriteLog(json.length)
              var newUrl = self.CaptureName + '://' + encodeURIComponent(json)
              self.WriteLog(newUrl.length)

              // 启动客户端
              document.getElementById('startCaptureFrame').src = newUrl

              self.IsWaitCustomizedCallBack = true
              return emCaptureUnknown
            }

            return emCaptureSuccess
          } catch (e) {
            // alert(e.message)
          }
          return emCaptureUnknown
        }

        this.IsNeedCustomizedProtocol = function() {
          if (!self.useCustomizedProtoco) {
            return false
          }

          if (self.pluginValid()) {
            return false
          }

          try {
            var agent = window.navigator.userAgent.toLowerCase()
            var isQQBrowser = agent.indexOf('qqbrowser') !== -1
            if (isQQBrowser) {
              return false
            }
            var isUBrowser = agent.indexOf('ubrowser') !== -1
            if (isUBrowser) {
              return false
            }
            var isChrome = agent.indexOf('chrome') !== -1
            if (isChrome) {
              return true
              // if (chrome && chrome.runtime) {
              //   return true
              // }
            }
            // 如果是firefox 且在50版本以上，则需要
            // var brow=$.browser;
            // if(brow.mozilla)
            // {
            //     return true;
            // }
            // var isEdge = agent.indexOf("edge") !== -1;
            // if(isEdge)
            // {
            //     return true;
            // }
            return true
          } catch (e) {}
          return false
        }

        this.GetVersion = function() {
          if (self.IsNeedCustomizedProtocol()) {
            if (self.connectState !== emConnected) {
              return
            }
            var obj = {}
            obj.command = 'version'
            self.NiuniuSocket.send(
              '1' + encodeURIComponent(JSON.stringify(obj))
            )
            return
          }

          if (!self.pluginValid()) {
            return
          }
          var verSion = self.niuniuCapture().GetVersion()
          self.VersionCallback(verSion)
          self.WriteLog(verSion)
        }
      }
      // end
      var captureObj = null

      /*
       * 用于初始化牛牛截图控件，此函数需要在页面加载完成后立即调用 在此函数中，您可以设置相关的截图的UI控制，如，画笔大小、边框颜色等等
       */
      function Init() {
        captureObj = new NiuniuCaptureObject()
        captureObj.NiuniuAuthKey = 'niuniu'
        // 此处可以设置相关参数
        captureObj.TrackColor = rgb2value(255, 0, 0)
        captureObj.EditBorderColor = rgb2value(0, 0, 255)

        // 设置工具栏的TOOLTIP
        // captureObj.ToolTipText =
        // "tipRectangle|tipCircle|tipArrow|tipBrush|tipGlitter|tipMosaic|tipText|tipUndo|tipSave|tipCancel|tipFinish|Finish";

        // 设置控件加载完成以及截图完成的回调函数
        captureObj.FinishedCallback = OnCaptureFinishedCallback
        captureObj.PluginLoadedCallback = PluginLoadedCallback
        captureObj.VersionCallback = VersionCallback

        // 初始化控件
        captureObj.InitNiuniuCapture()

        captureObj.SetWatermarkText(' ')
        captureObj.SetWatermarkPicture(' ')
      }

      // 用于返回控件的版本号
      function VersionCallback(ver) {
        return captureObj.Version
        // 可以在此根据最新的版本号与控件返回的版本号对比，决定是否要提示升级
      }

      /*
       * 当控件成功加载后回调的的函数，您可以在此控制相应的UI显示
       */
      function PluginLoadedCallback(success) {
        if (success) {
          _self.isBox = true
        }
      }

      /*
       * 需要下载控件安装包的提示信息，您可以根据需要进行调整
       */
      function ShowDownLoad() {
        _self.isBox = false
        // var msg = '您需要先下载控件进行安装,请点此<a class="colorBlue" target="_blank" href="../plugin/CaptureInstall.exe">安装</a>';
        // .a;//document.createElement("div");
        const a = this.$createElement
        this.$confirm(
          a(
            'a',
            {
              style: { color: '#5686d6', cursor: 'pointer', fontSize: '15px' },
              attrs: {
                target: '_blank',
                href: 'http://www.ggniu.cn/download.htm'
              }
            },
            '使用用截图控件您需要先下载控件进行安装,请点此安装'
          ),
          '提示',
          {
            confirmButtonText: '好的',
            type: 'warning',
            showCancelButton: false
          }
        )
      }

      /*
       * 当提示安装控件后，需要重新加载控件来使用截图； 也有部分是需要刷新浏览器的
       */
      // function ReloadPlugin() {
      //   // 如果是Chrome42以上版本，此处需要刷新页面才能让扩展在此页面上生效
      //   if (captureObj.IsNeedCrx()) {
      //     location.reload()
      //     return
      //   }
      //   captureObj.LoadPlugin()
      //   _self.isBox = false
      //   if (captureObj.pluginValid()) {
      //     _self.isBox = true
      //     // $('#info').html("截图控件已经安装完毕，您可以进行截图了。");
      //   } else {
      //     var msg =
      //       '截图控件未能识别到，请按如下步骤检查:<br/>1. 确定您已经下载控件安装包并正常安装 <br/>' +
      //       '2. 查看控件是否被浏览器阻止 <br/>' +
      //       '3. 刷新页面或重新启动浏览器试下<br/>'
      //     // console.log(msg)
      //     _self.$confirm(msg, '提示', {
      //       confirmButtonText: '好的',
      //       type: 'warning',
      //       showCancelButton: false
      //     })
      //   }
      // }

      /*
       * 截图入口函数，用于控制UI标签的显示
       */
      function StartCapture(xx) {
        var n = xx || 0
        var captureRet = captureObj.DoCapture('1.jpg', n * 1, 0, 0, 0, 0, 0)
        // 从返回值来解析显示
        // console.log(captureRet)
        // console.log(emCaptureFailed)
        if (captureRet === emCaptureFailed) {
          ShowDownLoad()
        } else if (captureRet === emCaptureUnknown) {
          // setTimeout(function(){
          //     var msg = '正在截图中, 如果超过5秒无响应，请点此<a class="colorBlue" target="_blank" href="../plugin/CaptureInstall.exe">安装</a>';
          //     console.log(msg)
          // },5000);
        }
      }

      /*
       * 此处是截图后的回调函数，用于将截图的详细信息反馈回来，你需要调整此函数，完成图像数据的传输与显示
       */
      function OnCaptureFinishedCallback(
        type,
        x,
        y,
        width,
        height,
        info,
        content,
        localpath
      ) {
        if (type < 0) {
          // 需要重新安装控件
          ShowDownLoad()
          return
        }

        // $('#show').hide();

        switch (type) {
          case 1: {
            UploadCaptureData(content, localpath)
            break
          }
          case 2: {
            break
          }
          case 3: {
            console.log('您保存了截图到本地： x:' + x + ',y:' + y + ',widht:' + width+ ',height:' + height)
            UploadCaptureData(content, localpath)
            break
          }
          case 4: {
            if (info === '0') {
              UploadCaptureData(content, localpath)
            } else {
              var msg = '从剪贴板获取图片失败。'
              // console.log(msg);
              _self.$confirm(msg, '提示', {
                confirmButtonText: '好的',
                type: 'warning',
                showCancelButton: false
              })
            }
            break
          }
        }
      }

      // 控制上传
      function UploadCaptureData(content, localpath) {
        //   var img = document.createElement('img')
        console.log('base64 content:' + content)
        // img.src = 'data:image/png;base64,' + content
        // console.log(img)
        // document.getElementById('textareaDiv').append(img)
      }

      /**
       * 调用人工客服回答的接口,msg数据要设置成图片的base64值
       */
      // function artificialReply() {}

      _self.$nextTick(() => {
        var hasInitNiuniu = null
        document.onkeydown = function(e) {
          console.log(e)
          if (e.ctrlKey && e.which === 88) {
            if (!hasInitNiuniu) {
              hasInitNiuniu = true
              Init()
            }
            StartCapture()
          }
        }

        _self.$refs.creenBtn.onclick = function() {
          if (!hasInitNiuniu) {
            hasInitNiuniu = true
            Init()
          }
          console.log(hasInitNiuniu)
          StartCapture()
        }

        // _self.$refs.creenBtn0.onclick = function(){
        //     StartCapture(0);
        // }

        // _self.$refs.creenBtn1.onclick = function(){
        //     StartCapture(1);
        // }
      })
    },
    byEvents() {
				this.dataList = [{
						img: 'https://picsum.photos/650/650',
						title: '标题1'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题2'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题3'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/1250/650',
						title: '标题'
					},
					{
						img: 'https://picsum.photos/650/650',
						title: '标题'
					}
				]
				let newDataList = [];
				let current = 0
				if (this.dataList && this.dataList.length > 0) {
					for (let i = 0; i <= this.dataList.length - 1; i++) {
						if (i % 4 !== 0 || i === 0) {	//数据处理成几张展示
							if (!newDataList[current]) {
								newDataList.push([this.dataList[i]])
							} else {
								newDataList[current].push(this.dataList[i])
							}
						} else {
							current++
							newDataList.push([this.dataList[i]])
						}
					}
				}
				this.dataList = [...newDataList]
			},
      onSearch(){

      },
      closeBox(){
        this.showImportPic=false;
      }
  },

};
</script>

<style lang="scss" scoped>
    .gallery-manage{
      background: #f7f7f7;
      overflow-y: auto;
      .title{
        padding:10px 20px;
        border:1px solid #efefef;
        background: #fff;
      }
      .card-item{
        display:flex;
      }
    }
    .gallery-list{
      padding:20px 30px;
      border-bottom:1px solid #efefef;
      margin-bottom:10px;
       background: #fff;
    }
		.carousel{
			width: 100%;
      padding-bottom: 20px;
			.el-car-item {
				width: 100%;
				height: 300px;
				display: flex;
				.divSrc{
					width:25%;
					height: 330px;
					background: #fff;
					margin-right: 46px;
          position: relative;
					.img {
						width:100%;
            margin-right: 20px;
            cursor: pointer;
					}
					.title{
						height: 40px;
						line-height: 40px;
						margin: 0 auto;
						font-size: 20px;
						font-weight: bold;
						color: #222222;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
        .divSrc:nth-child(4n){
          margin-right:0;
        }
				.oprate-btn{
          display: flex; 
          justify-content: space-around;
          position: absolute;
          bottom:10px;
          width:100%;
        }
			}
		::v-deep .el-carousel__arrow{
				background: transparent !important;
				display: block !important;
				margin-top: 25px;
        color: #4080FF;
        font-weight: bold;
        font-size: 28px;
			}
		}
		
    .form-inline{
      display: flex;
      justify-content: flex-end;
      width: 100%;
    }
    .demo-form-inline{
      padding:20px 20px 0;
      background: #fff;
    }
</style>
